<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-2">
        <p><span>{{ firstName }}</span>&nbsp;<span>{{ lastName }}</span></p>
        <p>{{ fullName }}</p>
        <input v-model='fullName'>
    </div>
    <script>
        var app2 = new Vue({
            el: '#app-2',
            data: {
                firstName: 'chen',
                lastName: 'fuqiang'
            },
            computed: {
                fullName: {
                    get: function () {
                        return this.firstName + ' ' + this.lastName;
                    },
                    set: function (value) {
                        var names = value.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[1];
                    }
                }
            }
        });
    </script>
</body>


</html>